<template>
    <div class="card" @keyup.enter="login()">
        <div class="login-card">
            <h2>用户登录</h2>
            <div class="input-card">
                <span>用户名:</span>
                <el-input class="input" placeholder="请输入用户名" v-model="user.username" clearable ref="username">
                </el-input>
            </div>

            <div class="input-card">
                <span>密码:</span>
                <el-input class="input" placeholder="请输入密码" v-model="user.password" show-password ref="password"></el-input>
            </div>

            <div class="other">
                <router-link class="reg" :to="{ name: 'Register' }">注册</router-link>
                <router-link class="fp" :to="{ name: 'FundPassword' }">找回密码</router-link>
            </div>

            <div class="button">
                <el-button class="submit" type="primary" @click="login()">登录</el-button>
            </div>
        </div>
    </div>
</template>

<script>

import { Message } from 'element-ui';
import instance from '../../utils/request';

export default {
    name: "Login",
    data() {
        return {
            //用户对象，用来保存用户名和密码
            user: {}
        }
    },
    methods: {

        /**
         * 登录
         */
        login() {
            //1.非空校验
            if (this.user.username == null || this.user.username == '') {
                Message.warning("用户名不能为空！");
                this.$refs.username.focus();//获取焦点(提升用户体验)
                return;
            }
            if (this.user.password == null || this.user.password == '') {
                Message.warning("密码不能为空！");
                this.$refs.password.focus();
                return;
            }
            //2.发送请求
            instance.post('/user/login', this.user).then(success => {
                if (success.data.code == 1000) { //这里根据后端定义状态码(1000 表示 "操作成功")
                    //登录成功
                    //1.将 Token 保存到 localStorage 中
                    const token = success.data.data.token;
                    localStorage.setItem("token", token);
                    //2.将用户登录信息状态通过 vux 和 localStorage 进行保存
                    this.$store.commit("login", success.data.data);
                    //3.提示跳转
                    Message.success("登录成功，为您跳转到主页~");
                    this.$router.push({ name: "Index" });
                } else {
                    //登录失败
                    console.log(success.data.msg);//从后端得到失败的信息(前端在控制台看即可)
                    Message.error("账号或密码错误，请重试！");
                }
            }).catch(error => {
                Message.error("服务器异常，请稍后重试！");
                console.log(error);
            });
        }
    }
}
</script>

<style scoped>
.card {
    width: 550px;
    height: 450px;
    margin: 80px auto;
    padding: 20px;
}

.login-card {
    width: 500px;
    height: auto;
    background-color: white;
    padding: 40px;

    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}


.login-card h2 {
    width: 100px;
    height: 60px;
    margin: 0px auto;
}

.input-card {
    display: flex;
    justify-content: left;
    align-items: center;
}

.input-card span {
    display: block;
    width: 80px;
    padding: 20px 0px;
}

.login-card .input {
    width: 300px;
}

.button {
    width: 300px;
    margin: 20px auto;
}

.login-card .submit {
    width: 300px;
}

.login-card .other {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.other a {
    text-decoration: none;
    color: #409eff
}

:hover.reg {
    text-decoration: underline;
}

:hover.fp {
    text-decoration: underline;
}
</style>
